<template>
  <div class="container">
    <!-- 搜索框 -->
    <div class="search-box">
      <van-search v-model="searchText" placeholder="搜索课程、作业" @search="onSearch" />
    </div>

    <!-- 轮播图 -->
    <div class="swiper">
      <van-swipe :autoplay="3000">
        <van-swipe-item v-for="(image, index) in swiperImages" :key="index">
          <img :src="image" alt="轮播图" />
        </van-swipe-item>
      </van-swipe>
    </div>

    <!-- 进行中的课程 -->
    <div class="courses">
      <h3>进行中的课程</h3>
      <div class="course-list" v-if="courses.length > 0">
        <div class="course-item" v-for="course in courses" :key="course.id">
          <img
            v-if="course.coverPath"
            :src="course.coverPath"
            class="course-image"
            alt="课程图片"
            @click="toCoursePage"
          />
          <div v-else class="default-img" @click="toCoursePage">{{ course.chapterName }}</div>
          <div class="info">
            <h4>{{ course.chapterName }}</h4>
            <p>{{ course.teacherName }}</p>
          </div>
        </div>
      </div>
      <div class="no-course-list" v-else>
        <img :src="book" class="book-image" alt="暂无课程图片" />
        <div class="info">暂无进行中的课程</div>
      </div>
    </div>

    <!-- 最新活动 -->
    <div class="activity">
      <h3>最新活动</h3>
      <div class="activity-list">
        <div class="activity-item" v-for="activity in activities" :key="activity.id">
          <div class="icon">
            <van-icon :name="activity.icon" />
          </div>
          <div class="content">
            <h4>{{ activity.title }}</h4>
            <p>{{ activity.description }}</p>
            <span>{{ activity.time }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { getCourseInProgress } from '@/api/course'
import { ref } from 'vue'
import swiper1 from '@/assets/img/swiper1.png'
import swiper2 from '@/assets/img/swiper1.png'
import swiper3 from '@/assets/img/swiper1.png'
import course1 from '@/assets/img/course1.png'
import book from '@/assets/img/book.svg'
import { useRouter } from 'vue-router'
const router = useRouter()

const searchText = ref('')

const swiperImages = [swiper1, swiper2, swiper3]

const courses = ref([
  {
    id: 1,
    image: course1,
    title: '篮球基础训练',
    teacher: '张老师',
  },
])

const activities = ref([
  {
    id: 1,
    icon: 'fire',
    title: '篮球小组练习',
    description: '请完成本周的篮球运动并上传视频',
    time: '2024-02-10',
  },
  {
    id: 2,
    icon: 'fire',
    title: '田径测试通知',
    description: '下周一将进行50米短跑测试，请做好准备',
    time: '2024-05-10',
  },
  {
    id: 3,
    icon: 'fire',
    title: '体育理论作业',
    description: '请完成体育健康知识问卷',
    time: '2024-05-12',
  },
])
const toCoursePage = () => {
  router.push(`/course`)
}

const onSearch = (val: string) => {
  console.log('搜索内容:', val)
}
onActivated(async () => {
  const { data } = await getCourseInProgress()
  console.log('data', data)
  courses.value = data.listCourse
})
</script>

<style scoped>
.container {
  padding: 15px;
  background: #f7f8fa;
}

.search-box {
  margin-bottom: 15px;
}

.swiper {
  margin-bottom: 10px;
}

.swiper img {
  width: 100%;
  height: auto;
}

.courses h3,
.activity h3 {
  font-size: 16px;
  margin-bottom: 10px;
  margin-top: 10px;
}

.course-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.no-course-list {
  padding: 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  .info {
    font-size: 12px;
    color: #6b7280;
    margin-top: 14px;
  }
}
.course-item {
  background-color: #fff;
  padding: 10px;
}
.default-img {
  width: 100%;
  height: 160px;
  border-radius: 8px;
  margin-right: 15px;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #d9d9d9;
  margin-bottom: 15px;
}
.course-item img {
  width: 100%;
  height: 224px;
  object-fit: contain;
  border-radius: 4px;
}

.info h4 {
  font-size: 14px;
  margin-bottom: 5px;
}

.info p {
  font-size: 12px;
  color: #999;
}

.activity-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.activity-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  background: #fff;
  border-radius: 4px;
}

.icon {
  font-size: 20px;
  color: #1989fa;
}

.content {
  flex: 1;
}

.content h4 {
  font-size: 14px;
  margin-bottom: 5px;
}

.content p {
  font-size: 12px;
  color: #666;
  margin-bottom: 3px;
}

.content span {
  font-size: 11px;
  color: #999;
}
</style>
